import { Avatar, Layout, Switch } from "antd";
import "./index.scss";
import { connect } from "react-redux";
import { UserLevelName } from "@/router/baseRouter.tsx";
import { MoonOutlined, SunOutlined } from "@ant-design/icons";

const { Header } = Layout;

const Header_Antd = ({ user }) => {
  const handlerChange = (checked: boolean, e: any) => {
    // 点击按钮时切换主题
    const transition = document.startViewTransition(() => {
      // 在 startViewTransition 中修改 DOM 状态产生动画
      document.documentElement.classList.toggle("dark");
    });
    // 在 transition.ready 的 Promise 完成后，执行自定义动画
    transition.ready.then(() => {
      // 由于我们要从鼠标点击的位置开始做动画，所以我们需要先获取到鼠标的位置
      const { clientX, clientY } = e;

      // 计算半径，以鼠标点击的位置为圆心，到四个角的距离中最大的那个作为半径
      const radius = Math.hypot(
        Math.max(clientX, innerWidth - clientX),
        Math.max(clientY, innerHeight - clientY),
      );
      const isDark = document.documentElement.classList.contains("dark");
      const clipPath = [
        `circle(0% at ${clientX}px ${clientY}px)`,
        `circle(${radius}px at ${clientX}px ${clientY}px)`,
      ];
      // 自定义动画
      document.documentElement.animate(
        {
          clipPath: isDark ? clipPath.reverse() : clipPath,
        },
        {
          duration: 500,
          pseudoElement: isDark
            ? "::view-transition-old(root)"
            : "::view-transition-new(root)",
        },
      );
    });
  };
  return (
    <Header className="header-container frostedGlass">
      <div className="demo-logo">大标题</div>

      <div className="right">
        <Switch
          onChange={handlerChange}
          checkedChildren={<SunOutlined />}
          unCheckedChildren={<MoonOutlined />}
          defaultChecked
        />
        <Avatar style={{ background: "#ff6200" }}>{UserLevelName[user]}</Avatar>
      </div>
    </Header>
  );
};

export default connect(
  (state: any) => ({
    user: state.user.userLevel,
  }),
  null,
)(Header_Antd);
